<template>
  <div class="inline-container">
    <!-- <input type="text" 
       class="z-input"
       v-bind="$attrs"
       v-model="inputValue"
       @input="onInput"
       > -->
    <template v-if="type === 'textarea'">
      <textarea
        class="z-textarea"
        v-bind="$attrs"
        :class="styleClass"
        v-model="inputValue"
        v-on="MyListeners"
      />
    </template>
    <template v-else-if="type === 'text'">
      <div class="inline-container" :class="className">
        <div class="z-input-prepend" v-if="$slots.prepend">
            <slot name="prepend"></slot>
        </div>
        <div class="z-input-outer">
          <input
            class="z-input"
            :class="styleClass"
            v-bind="$attrs"
            v-model="inputValue"
            v-on="MyListeners"
          />
          <span class="z-input-clear" @click="handleClick" v-if="showClear">
            <z-icon name="chahao"></z-icon>
          </span>
        </div>
        <div class="z-input-append" v-if="$slots.append">
            <slot name="append"></slot>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "zInput",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    type: {
      type: String,
      default: "text",
      validator: (value) => {
        return ["text", "textarea"].includes(value);
      },
    },
    size: {
      type: String,
      default: "small",
      validator: (value) => {
        return ["small", "medium"].includes(value);
      },
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    center: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    styleClass() {
      return {
        [`z-input--${this.size}`]: this.size,
        "is-disabled": this.disabled,
        "is-center": this.center,
      };
    },
    MyListeners() {
      return Object.assign(this.$listeners, {
        input: (event) => this.$emit("input", event.target.value),
      });
    },
    showClear() {
      return this.clearable && this.inputValue !== "";
    },
    className() {
        return {
            'has-prepend': this.$slots.prepend,
            'has-append': this.$slots.append
        }
    }
  },
  mounted() {
    console.log(this.$listeners, "我是listeners", this.size);
  },
  methods: {
    // onInput(event) {
    //   this.inputValue = event.target.value;
    // },
    handleClick() {
      this.inputValue = ''
    },
  },
};
</script>
<style scoped>
.z-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.z-input.is-disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

.z-input.is-center {
  text-align: center;
}

.z-input:hover {
  border-color: #c0c4cc;
}

.z-input:focus {
  outline: none;
  border-color: #409eff;
}

.z-input::-webkit-scrollbar {
  z-index: 11;
  width: 6px;
}

.z-input::-webkit-scrollbar:horizontal {
  height: 6px;
}

.z-input::-webkit-scrollbar-thumb {
  border-radius: 5px;
  width: 6px;
  background: #b4bccc;
}

.z-input::-webkit-scrollbar-corner {
  background: #fff;
}

.z-input::-webkit-scrollbar-track {
  background: #fff;
}

.z-input::-webkit-scrollbar-track-piece {
  background: #fff;
  width: 6px;
}

.r-textarea {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.r-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.z-input-prepend,
.z-input-append {
  background-color: #f5f7fa;
  color: #909399;
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 0px;
  padding: 0 10px;
  width: 1px;
  white-space: nowrap;
  width: max-content;
}

.has-prepend .z-input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: none;
}

.has-append .z-input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: none;
}

.has-prepend .z-input-prepend {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.has-prepend .z-input-append {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.has-append .z-input-append {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.z-input--medium {
  height: 36px;
  line-height: 36px;
}

.z-input--small {
  height: 32px;
  line-height: 32px;
}

.inline-container {
  width: 100%;
  display: inline-flex;
}

.z-input-outer {
  width: 100%;
  position: relative;
}

.z-input-clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
  cursor: pointer;
}
</style>
